window.addEventListener('pageshow',function () {
    // 1. 获取元素
    var focus = document.querySelector('.focus');
    var ul = focus.children[0];
    var ol = focus.children[1];
    // 2. 获得focus宽度
    var w = focus.offsetHeight;
    // 3. 定时器自动播放轮播图
    var index = 0;
    var timer = setInterval(funcTimer,2000)

    // 监听过渡完成事件 只有过渡完成才能移动盒子
    ul.addEventListener('transitionend',function () {
    // 无缝滚动
        if (index >= 2) {
            index = 0;
        } else if(index < 0) {
            // 倒着拖拉
            index = 1;
        }
        var translateY = -index * w;
        // 去掉过渡时间 以便盒子快速跳到第一张
        this.style.transition = 'all .05s';
        // 移动
        this.style.transform = 'translateY('+translateY+'px)';

    //  小圆圈跟着变化
    //  去掉带有current类名的li标签
        ol.querySelector('.current').classList.toggle('current');
    //  当前li加上current
        ol.querySelectorAll('li')[index].classList.add('current');
    })

    // 手指滑动轮播图
    var startY = 0;
    var moveY = 0;
    // 判断用户是否只是触摸了屏幕
    var flag = false;
    ul.addEventListener('touchstart',function (e) {
        // 获取手指最开始的位置
        startY = e.targetTouches[0].pageY;
        // 停止计时器
        clearInterval(timer);
    })
    ul.addEventListener('touchmove',function (e) {
        // 停止计时器
        clearInterval(timer);
        // 计算手指移动的距离
        moveY = e.targetTouches[0].pageX - startY;
        // 清除过渡
        this.style.transition = 'none';
        // 计算盒子移动距离
        var translateY = -index * w + moveY;
        // 移动盒子
        this.style.transform = 'translateY('+translateY+'px)';
        // 用户滑动了屏幕
        flag = true;
        // 阻止滚动屏幕的默认行为
        e.preventDefault();
    })


    // 手指离开轮播图 根据移动距离判断播放上一张/下一张/回弹
    ul.addEventListener('touchend',function () {
        // 如果flag = true 表明用户滑动了轮播图  才去判断移动距离 避免不必要的计算
        if (flag) {
            if (Math.abs(moveY) > 100) {
                index = moveY > 0? index - 1: index +1;
            }
            // 如果不大于100像素 则不做任何操作 使其回弹
            this.style.transition = 'all .3s';
            // 计算盒子移动距离
            var translateY = -index * w;
            // 移动盒子
            this.style.transform = 'translateY('+translateY+'px)';
        }
        // 开启定时器
        clearInterval(timer); // 关闭多余的定时器
        timer = setInterval(funcTimer,2000);
        // 重置
        flag = false;
    })

    // 定时器执行函数
function funcTimer() {
    index++;
    var translateY = -index * w;
    // 添加过渡效果
    ul.style.transition = 'all .3s';
    // 在x上移动
    ul.style.transform = 'translateY(' + translateY + 'px)';
}
})
